<template>
  <div class="marketing-model">

    <div class="marketing-list" >

      <div class="btns">
        <el-button @click="doAddOpen" type="warning">+ 添加合作平台</el-button>
      </div>

      <div class="search-box">
        <div class="labelName lf">平台名称：</div>
        <el-input class="elInput lf" v-model="platform_name"></el-input>

        <div class="labelName lf">游戏名称：</div>
        <el-input class="elInput lf" v-model="game_name"></el-input>

        <!--<div class="labelName lf">游戏名称：</div>-->
        <!--<el-input class="elInput lf" v-model="goods_name"></el-input>-->

        <!--<div class="labelName lf">所属平台：</div>-->
        <!--<el-select class="elInput lf" v-model="status" placeholder="请选择">-->
          <!--<el-option-->
            <!--v-for="item in statusOptions"-->
            <!--:key="item.value"-->
            <!--:label="item.label"-->
            <!--:value="item.value">-->
          <!--</el-option>-->
        <!--</el-select>-->

        <div class="labelName lf">合作时间：</div>
        <el-date-picker class="lf elInput" style="margin-right:10px;"  value-format="yyyy-MM-dd 00:00:00" v-model="startTime" type="date" placeholder="选择日期"></el-date-picker>
        <div class="labelName lf">至：</div>
        <el-date-picker value-format="yyyy-MM-dd 23:59:59" class="elInput lf" v-model="endTime" type="date" placeholder="选择日期"></el-date-picker>

        <el-button class="lf" type="primary" @click="searchData()">查询</el-button>
      </div>

      <div class="table-box">
        <el-table :data="dataList" @sort-change="onSortChange">

          <el-table-column label="平台名称" prop="name" ></el-table-column>
           <el-table-column type="expand">
            <template slot-scope="scope">
              <el-table :data="scope.row.son" >
                <!--<el-table-column type="selection" width="55"></el-table-column>-->
                <el-table-column label="游戏名称" prop="name"></el-table-column>
                <!--<el-table-column label="ID（平台id）" prop="pgid"></el-table-column>-->
                <el-table-column label="游戏ID" prop="pgid"></el-table-column>
                <el-table-column label="描述" prop="description"></el-table-column>
                <el-table-column label="平台密匙" prop="secret_key">
                  <template slot-scope="scope">/</template>
                </el-table-column>
                <el-table-column label="合作时间" prop="cooperate_time"></el-table-column>
                <el-table-column label="创建时间" prop="create_time"></el-table-column>
                <el-table-column label="操作" width="140px">
                  <template slot-scope="data">
                    <div class="control">
                      <a class="action-btn" @click="gameEditOpen(scope.row,data.row)">编辑游戏</a>
                      <a class="action-btn" @click="doDeleteGame(scope.row,data.row)">删除游戏</a>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </template>
           </el-table-column>

          <el-table-column label="ID（平台id）" prop="pgid" width="160px"></el-table-column>
          <el-table-column label="描述" prop="description"></el-table-column>
          <el-table-column label="平台密匙" prop="secret_key"></el-table-column>
          <el-table-column label="合作时间" prop="cooperate_time"></el-table-column>
          <el-table-column label="创建时间" prop="create_time"></el-table-column>
          <el-table-column label="操作" width="200px">
            <template slot-scope="scope">
              <div class="control">
                <a class="action-btn" @click="addGamesOpen(scope.row)">添加游戏</a>
                <a class="action-btn" @click="doEditOpen(scope.row)">编辑</a>
                <a class="action-btn"  @click="doDelete(scope.row)">删除</a>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-sizes="pageSizeArray"
          :page-size="10"
          layout="sizes, prev, pager, next"
          :total="total_count">
        </el-pagination>
      </div>

    </div>

    <el-dialog title="" data-flag="编辑" width="1000px;" @close="onDialogClose" :show-close="false" :visible.sync="dialogShow">

      <div class="form-item clearfix" v-if="dialogBtnText === '新增'">
        <div class="labelName lf">平台id</div>
        <input v-model="platform_id" type="text" class="lf linkAddressInput" >
      </div>

      <div class="form-item clearfix">
        <div class="labelName lf">平台名称</div>
        <input v-model="platform_name" type="text" class="lf linkAddressInput" >
      </div>

      <div class="form-item clearfix">
        <div class="labelName lf">合作时间：</div>

        <div class="block">
          <el-date-picker
            v-model="cooperate_time"
            type="datetime"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button class="elButton" @click="doEdit" type='primary' >{{dialogBtnText}}</el-button>
        <el-button class="elButton" @click="doEditClose">取 消</el-button>
      </span>

    </el-dialog>

    <!--新增或编辑游戏-->
    <el-dialog title="" data-flag="新增、编辑游戏" width="1000px;" @close="onDialogClose" :show-close="false" :visible.sync="gamesDialog">

      <!--<div class="form-item clearfix">-->
        <!--<div class="labelName lf">平台id</div>-->
        <!--<input v-model="platform_id" type="text" class="lf linkAddressInput" readonly>-->
      <!--</div>-->

      <div class="form-item clearfix" v-if="gameDialogBtnText === '新增'">
        <div class="labelName lf">游戏id</div>
        <input v-model="game_id" type="text" class="lf linkAddressInput">
      </div>

      <div class="form-item clearfix">
        <div class="labelName lf">游戏名称</div>
        <input v-model="game_name" type="text" class="lf linkAddressInput" >
      </div>

      <!--<div class="form-item clearfix">-->
        <!--<div class="labelName lf">商品分组id</div>-->
        <!--<input v-model="goods_group_id" type="text" class="lf linkAddressInput" >-->
      <!--</div>-->

      <div class="form-item clearfix">
        <div class="labelName lf">游戏描述</div>
        <input v-model="game_desc" type="text" class="lf linkAddressInput" >
      </div>

      <div class="form-item clearfix">
        <div class="labelName lf">商品分组id</div>
        <div class="cascader lf">
          <el-cascader expand-trigger="click" :options="searchOptions" v-model="goods_group_id" :change-on-select="true"></el-cascader>
        </div>
      </div>

      <div class="form-item clearfix">
        <div class="labelName lf">合作时间：</div>
        <div class="block">
          <el-date-picker
            v-model="cooperate_time"
            type="datetime"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button class="elButton" @click="doGameEdit" type='primary' >{{gameDialogBtnText}}</el-button>
        <el-button class="elButton" @click="doGameClose">取 消</el-button>
      </span>

    </el-dialog>

  </div>
</template>
<script>
  export default {
    name: "xiaoxiaole",
    components: {},
    watch: {
      $route(to, from) {
        this.currentRouter = to.params.type;
        console.log(this.currentRouter);
        if( this.currentRouter === "1" ){
          this.per_page = 10;
          this.getCooGoodsList();
        }
      }
    },
    methods: {
      //排序
      onSortChange(data) {
        console.log(data);
        this.sc_name = data.prop;
        //判断升序降序
        if (data.order === "ascending") {
          this.sc = 'asc'
        } else {
          this.sc = 'desc'
        }
        this.getCooGoodsList();
      },

      //切换页面
      handleCurrentChange(page) {
        this.currentPage = page;
        this.getCooGoodsList();
      },

      //分页 每页条数切换
      handleSizeChange(data) {
        this.per_page = data;
        this.getCooGoodsList();
      },

      //点击查询
      searchData() {
        this.currentPage = 1;
        this.getCooGoodsList();
      },


      //默认获取分组列表
      getGroupListInit() {
        this.$http(
          "/wgl_admin/index.php?app=group&act=lists",
          "get",
          {},
          {},
          {},
          success => {
            let listData = success.data;
            let resArr = [];
            for (let item of listData) {
              let childArr = [];
              if (item.child) {
                for (let child of item.child) {
                  childArr.push({
                    value: child.id,
                    label: child.name
                  });
                }
              }
              resArr.push({
                value: item.id,
                label: item.name,
                children: childArr
              });
            }
            this.searchOptions = resArr;
          },
          error => {}
        );
      },

      //商品列表
      getCooGoodsList() {
        let formData = new FormData();
        formData.append("page", this.currentPage);
        formData.append("per_page", this.per_page);

        this.platform_id ? formData.append("platform_id", this.platform_id) : "" ;
        this.game_name ? formData.append("game_name", this.game_name) : "" ;
        this.platform_name ? formData.append("platform_name", this.platform_name) : "" ;
        this.startTime ? formData.append("start_time", this.startTime) : "" ;
        this.endTime ? formData.append("end_time", this.endTime) : "" ;


        this.$http(
          "/wgl_admin/index.php?app=cooperate&act=index",
          "post",
          {},
          {},
          formData,
          success => {
            this.dataList = success.data.list;
            this.total_count = success.data.total_count;
          },
          error => {
            this.$message.error(error.state.msg);
          }
        );
      },

      //清空数据
      clearData() {
        this.platform_id = "";
        this.game_name = "";
        this.platform_name = "";
        this.id = "";
        this.start_time = "";
        this.end_time = "";
        this.cooperate_time = "";
        this.goods_group_id = [];
        this.game_id = '';
        this.game_desc = '';
      },

      //打开新增窗口
      doAddOpen() {
        this.dialogBtnText = "新增";
        this.dialogShow = true;
      },

      //编辑窗口 打开
      doEditOpen(row){
        console.log(row);
        this.dialogBtnText = "编辑";
        this.dialogShow = true;
        this.platform_id = row.pgid;
        this.id = row.id;
        this.platform_name = row.name;
        this.cooperate_time = row.cooperate_time;
      },

      //关闭弹窗时 清空数据
      onDialogClose(){
        this.clearData();
      },

      //编辑窗口 关闭
      doEditClose() {
        this.dialogShow = false;
      },

      //平台 编辑
      doEdit() {
        if( this.dialogBtnText === "新增" ){
          let reqArr = [
            ["platform_id", "string", "请输入平台id"],
            ["platform_name", "string", "请输入平台名称"],
            ["cooperate_time", "string", "请选择合作时间"],
          ];
          let res = this.$requiredFun(reqArr, this);

          if(res.state){
            let formData = new FormData();
            formData.append("platform_id", this.platform_id);
            formData.append("platform_name", this.platform_name);
            formData.append("cooperate_time", this.cooperate_time);

            this.$http(
              "/wgl_admin/index.php?app=cooperate&act=add_platform",
              "post",
              {},
              {},
              formData,
              success => {
                this.dialogShow = false;
                this.$message.success(success.state.msg);
                this.clearData();
                this.getCooGoodsList();
              },
              error => {
                this.$message.error(error.state.msg);
              }
            );
          } else {
            this.$message.error(res.msg);
          }
        }
        else {
          let reqArr = [
            ["platform_id", "string", "请输入平台id"],
          ];
          let res = this.$requiredFun(reqArr, this);

          if(res.state){
            let formData = new FormData();
            formData.append("id", this.id);
            formData.append("platform_name", this.platform_name);
            formData.append("cooperate_time", this.cooperate_time);

            this.$http(
              "/wgl_admin/index.php?app=cooperate&act=edit_platform",
              "post",
              {},
              {},
              formData,
              success => {
                this.dialogShow = false;
                this.$message.success(success.state.msg);
                this.clearData();
                this.getCooGoodsList();
              },
              error => {
                this.$message.error(error.state.msg);
              }
            );
          } else {
            this.$message.error(res.msg);
          }
        }
      },

      //平台 删除
      doDelete(row){
        console.log(row.id);
        let formData = new FormData();
        formData.append("id", row.id);

        this.$confirm("是否确定删除", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.$http(
              "/wgl_admin/index.php?app=cooperate&act=drop_platform",
              "post",
              {},
              {},
              formData,
              success => {
                this.dialogShow = false;
                this.clearData();
                this.$message.success(success.state.msg);
                this.getCooGoodsList();
              },
              error => {
                this.$message.error(error.state.msg);
              }
            );
          })
          .catch(() => {});

      },

      //打开新增游戏
      addGamesOpen(row) {
          this.gamesDialog = true;
          this.gameDialogBtnText = "新增";
          console.log(row);
          this.platform_id = row.pgid;
      },

      // 新增或编辑 游戏
      doGameEdit() {
          if( this.gameDialogBtnText === "新增" ){
            let reqArr = [
              ["platform_id", "string", "请输入平台id"],
              ["goods_group_id", "", "请输入商品分组id"],
              ["game_id", "string", "请输入游戏id"],
              ["game_name", "string", "请输入游戏名称"],
              ["game_desc", "string", "请输入游戏描述"],
              ["cooperate_time", "string", "请选择合作时间"]
            ];
            let res = this.$requiredFun(reqArr, this);

            if(res.state){
              let formData = new FormData();
              formData.append("platform_id", this.platform_id);
              this.goods_group_id[1] ? formData.append("goods_group_id", this.goods_group_id[1]) : formData.append("goods_group_id", this.goods_group_id[0]) ;
              formData.append("game_id", this.game_id);
              formData.append("game_name", this.game_name);
              formData.append("game_desc", this.game_desc);
              formData.append("cooperate_time", this.cooperate_time);

              console.log(formData);

              this.$http(
                "/wgl_admin/index.php?app=cooperate&act=add_game",
                "post",
                {},
                {},
                formData,
                success => {
                  this.gamesDialog = false;
                  this.$message.success(success.state.msg);
                  this.clearData();
                  this.getCooGoodsList();
                },
                error => {
                  this.$message.error(error.state.msg);
                }
              );
            } else {
              this.$message.error(res.msg);
            }
          }
          else {
            let formData = new FormData();
            formData.append("id", this.id);
            this.goods_group_id[1] ? formData.append("goods_group_id", this.goods_group_id[1]) : formData.append("goods_group_id", this.goods_group_id[0]) ;
            formData.append("game_name", this.game_name);
            formData.append("game_desc", this.game_desc);
            formData.append("cooperate_time", this.cooperate_time);

            this.$http(
              "/wgl_admin/index.php?app=cooperate&act=edit_game",
              "post",
              {},
              {},
              formData,
              success => {
                this.gamesDialog = false;
                this.$message.success(success.state.msg);
                this.clearData();
                this.getCooGoodsList();
              },
              error => {
                this.$message.error(error.state.msg);
              }
            );
          }
      },

      // 游戏编辑 打开
      gameEditOpen(row,subRow){
//        console.log(row);
//        console.log(subRow);

        this.gamesDialog = true;
        this.gameDialogBtnText = "编辑";

        this.id = subRow.id;
        this.game_name = subRow.name;

        let firstIndex;
        let secondIndex;
        let goods_group_id = subRow.goods_group_id;
        // 根据数据 goods_group_id 遍历 searchOptions，高亮选项
        this.searchOptions.forEach(( cVal, index, arr )=>{
            if( cVal.value === goods_group_id ){
//                console.log("第一层",index);
                let tempArr = [];
                tempArr[0] = this.searchOptions[index].value;
                this.goods_group_id = tempArr;
            }
            else {
              cVal.children.forEach(( cVal2, index2, arr2 )=>{
                if( cVal2.value === goods_group_id ){
                  firstIndex = index;
                  secondIndex = index2;
//                  console.log(subRow.goods_group_id);
//                  console.log("第一层",firstIndex);
//                  console.log("第二层",secondIndex);
//                  console.log(this.searchOptions[firstIndex].value);
                  let tempArr = [];
                  tempArr[0] = this.searchOptions[firstIndex].value;
                  tempArr[1] = goods_group_id;
                  this.goods_group_id = tempArr;
                }
              });
            }
        });

        this.game_desc = subRow.description;
        this.cooperate_time = subRow.cooperate_time;
      },

      //游戏关闭
      doGameClose(row) {
        this.gamesDialog = false;
      },

      //游戏 删除
      doDeleteGame(row,subRow){
        console.log(subRow.id);
        let formData = new FormData();
        formData.append("id", subRow.id);

        this.$confirm("是否确定删除", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.$http(
              "/wgl_admin/index.php?app=cooperate&act=drop_game",
              "post",
              {},
              {},
              formData,
              success => {
                this.$message.success(success.state.msg);
                this.clearData();
                this.getCooGoodsList();
              },
              error => {
                this.$message.error(error.state.msg);
              }
            );
          })
          .catch(() => {});

      },

    },
    created() {
      this.getCooGoodsList();
      this.getGroupListInit();
    },
    mounted() {
      this.currentRouter = this.$route.params.type;
    },
    data() {
      return {
        currentPage: 1, //当前的页面
        per_page: 10,
        pageSizeArray: PageSizeArray,
        total_count: 0,

        id: '', //平台唯一标识id
        platform_id: '', //pgId
        game_name: '',
        platform_name: '',
        cooperate_time: '',
        startTime: '',
        endTime: '',

        goods_group_id: [],

        game_id: '',
        game_desc: '',

        sc_name: "", //排序的字段
        sc: "", //升序或者是降序

        dialogShow: false,


        searchOptions: [], //所搜用的分组列表

        status: 2,
        statusOptions: [
          {
            value: 2,
            label: "全部"
          },
          {
            value: 1,
            label: "在线"
          },
          {
            value: 0,
            label: "已下线"
          }
        ],

        currentRouter: "",

        dataList: [],

        dialogBtnText: '编辑',
        gameDialogBtnText: '编辑',
        gamesDialog: false

      };
    }
  };
</script>
<style lang="scss" scoped>
  .marketing-model {
    padding-left: 118px;
    .marketing-list {
      padding: 30px 56px 30px 50px;
      .btns {
        min-width: 1080px;
        margin-bottom: 38px;
      }
      .search-box {
        border: 1px solid #e6e8f4;
        max-width: 1453px;
        min-width: 600px;
        width: 100%;
        height: 90px;
        padding: 25px 30px;
        &.high {
          height: 140px;
        }
        .elInput {
          display: block;
          width: 150px;
          font-size: 12px;
          color: #333;
          margin-right: 20px;
        }
        .labelName {
          height: 40px;
          line-height: 40px;
          color: #333;
          font-size: 14px;
        }
        .elTimepicker {
          display: block;
          width: 180px;
          font-size: 12px;
          color: #333;
          margin-right: 10px;
        }
      }
      .table-box {
        // max-width: 1466px;
        width: 100%;
        margin-top: 48px;
        .control {
          > a {
            color: #3f87f5;
            font-size: 12px;
            cursor: pointer;
          }
          .price {
            font-size: 12px;
            color: #e17474;
          }

          .action-btn:last-child::after {
            width: 0;
            height: 0;
          }

        }

        .userAvatar {
          width: 80px;
          height: 80px;
          margin: 0 auto;
          img {
            width: 100%;
            height: 100%;
          }
        }

        .goodsDetail {
          .priviewImg {
            margin-right: 10px;
            > img {
              display: block;
              width: 80px;
              height: 80px;
              margin: 0 auto;
            }
          }
          .goodsMsg {
            color: #333;
            font-size: 12px;
            max-width: 120px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4;
            overflow: hidden;
          }
        }
      }
    }
    .form-item {
      width: 615px;
      margin: 0 auto 20px;
      color: #666666;
      font-size: 12px;
      .labelName {
        width: 100px;
        text-align: right;
        height: 40px;
        line-height: 40px;
        margin-right: 10px;
      }
      .linkAddressInput {
        height: 40px;
        border: 1px solid #e6e8f4;
        padding: 0 28px;
        margin-right: 10px;
        width: 475px;
        padding: 0 28px;
      }
      .tips {
        height: 40px;
        line-height: 40px;
      }
    }
    .uploadImg-box {
      width: 110px;
      height: 110px;
      border: 1px solid #e6e8f4;
      background: #f8f9fe;
      position: relative;
      margin: 0 auto 50px;
      .uploadImg-tips {
        width: 100%;
        height: 100%;
        .add-icon {
          text-align: center;
          color: #e6e8f7;
          font-size: 40px;
          height: 70px;
          line-height: 70px;
        }
        .des {
          font-size: 14px;
          text-align: center;
          color: #a6a8a5;
        }
      }
      .previewImages {
        display: block;
        width: 100%;
        height: 100%;
        > img {
          display: block;
          height: 100%;
          width: 100%;
        }
        .change-btn {
          position: absolute;
          bottom: 0;
          text-align: center;
          width: 100%;
          background: rgba(0, 0, 0, 0.5);
          color: #fff;
          height: 24px;
          line-height: 24px;
          left: 0;
          cursor: pointer;
          font-size: 12px;
          cursor: pointer;
        }
        .change-btn:hover {
          background: #333;
        }
      }
      .uploadInputFile {
        width: 100%;
        height: 100%;
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        cursor: pointer;
        z-index: 9999;
        cursor: pointer;
      }
      .tips {
        height: 30px;
        line-height: 30px;
        color: #666;
        text-align: center;
        font-size: 14px;
      }
    }
    .dialog-footer {
      display: block;
      height: 100%;
      width: 100%;
      padding-top: 18px;
      border-top: 1px solid #e6e8f4;
      .elButton {
        width: 150px;
      }
    }
  }
  .pagination {
    width: 1466px;
    text-align: right;
    margin-top: 46px;
  }
</style>
